<template>
	<view class="page-fade-in" :style="{opacity: pageOpc}">
		<template v-if="pageOpc">
			<view class="main-container">
				<view class="deadline-box">
					<text class="label">整改截止日期：</text>
					<text class="time">{{reportVo.rectificationTime}}</text>
				</view>
				<block v-for="(item,index) in list" :key="index">
					<view class="rectify-record" v-if="item.auditTime">
						<view class="record-info">审核时间：{{item.auditTime}}</view>
						<view class="record-info">审核人：{{item.auditUsername}}</view>
						<view class="record-info">
							审核结果：<text>{{item.auditResults==1?'合格':'不合格'}}</text>
						</view>
						<view class="record-info">
							说明：<text>{{item.auditDesc}}</text>
						</view>
					</view>
					<view class="rectify-record">
						<view class="record-info">整改时间：{{item.rectificationTime}}</view>
						<view class="record-info">整改人：{{item.rectificationUsername}}</view>
						<view class="record-info">
							<view style="flex-shrink: 0;">整改说明：</view>
							<text>{{item.rectificationDesc}}</text>
						</view>
						<view class="imgVideo-box">
							<view class="label">整改后图片或视频：</view>
							<view class="upload-box">
								<view class="file-item" v-for="(item,k) in item.fileList" :key="k">
									<block v-if="isVideoOrImage(item) == 'video'">
										<video :src="item" object-fit="cover" class="img" ></video>
									</block>
									<block v-else>
										<image :src="item" class="img" @tap.stop="previewImage(item)" mode="aspectFill"></image>
									</block>
								</view>
							</view>
						</view>
						<view class="review-box" v-if="!isGreater(reportVo.rectificationTime)&&reportVo.status==1&&(list&&list.length>0)&&index==0">
							<view class="review-btn" @tap="openPupup">整改</view>
						</view>
					</view>
				</block>
				
				<view class="problem-description">
					<view class="title">{{series}}（{{reportVo.originalScore||0}}分）：</view>
					<view class="desc">{{reportVo.project||'-'}}</view>
					<view class="suggest-box flexWrapNo">
						<view class="label">问题说明：</view>{{reportVo.problem||'-'}}
					</view>
					<view class="imgVideo-box">
						<view class="label">现场问题图片或视频：</view>
						<view class="upload-box" v-if="reportVo&&reportVo.problemAttachment">
							<view class="file-item" v-for="(item,k) in reportVo.problemAttachment.split(',')" :key="k">
								<block v-if="isVideoOrImage(item) == 'video'">
									<video :src="item" object-fit="cover" class="img" ></video>
								</block>
								<block v-else>
									<image :src="item" class="img" @tap.stop="previewImage(item)" mode="aspectFill"></image>
								</block>
							</view>
						</view>
						<view class="quesheng" v-else>无图片或视频</view>
					</view>
					<view class="review-box" v-if="!isGreater(reportVo.rectificationTime)&&reportVo.status==1&&(list&&list.length==0)">
						<view class="review-btn" @tap="openPupup">整改</view>
					</view>
				</view>
			</view>
			
			<!-- 底部弹窗 -->
			<uni-popup ref="popup" type="bottom" :is-mask-click="false">
				<view class="popup-content">
					<uni-icons type="closeempty" size="22" color="#fff" class="close-icon" @tap="closePopup"></uni-icons>
					<view class="title">整改记录</view>
					<view class="commit-box">
						<view class="label">整改说明：</view>
						<textarea v-model="rectificationDesc"
							placeholder-style="color:rgba(255,255,255,0.6);font-size:26rpx" 
							placeholder="具体整改措施"
						/>
					</view>
					<view class="commit-box">
						<view class="label">现场问题图片或视频：</view>
						<l-upload :limit="5" :files="rectificationAttachment?rectificationAttachment.split(','):[]" @complete="complete" @remove="remove"></l-upload>
						<view class="tips">图片或视频最多5张</view>
					</view>
					<view class="submit-btn" @tap="submit">提交保存</view>
				</view>
			</uni-popup>
		</template>
	</view>
</template>

<script>
	import utils from '@/common/lib/util.js'
	export default{
		data(){
			return{
				pageOpc:0,
				id:'',
				series:'',
				list:[],
				reportVo:{},
				rectificationDesc:'',
				rectificationAttachment:'',
				
				page: 1,
				size: 8,
				showEmpty: true,
				showLoadStatus: false,
				more: true,
				status: 'loading',
			}
		},
		onReady() {
			setTimeout(() => {
				this.pageOpc = 1
			}, 100)
		},
		onLoad(options) {
			this.id=options.id
			this.series=options.series
			this.getPagePatrolRecord()
		},
		methods:{
			// 判断是视频还是图片
			isVideoOrImage(file) {
				let videoRegex = /(\mp4|\avi|\mkv)$/i
			    let imgRegex = /(\jpg|\jpeg|\png|\gif|\webp)$/i
				if (imgRegex.test(file)) {
					return 'image'
				} else if (videoRegex.test(file)) {
					return 'video'
				} else {
					return 'unknown'
				}
			},	
			
			freshList(){
				this.page = 1
				this.more = true
				this.status = 'loading'
				this.list = []
				this.getPagePatrolRecord();
			},
			
			// 获取记录
			getPagePatrolRecord(){
				this.$request.post(this.$api.getPagePatrolRecord, {
					reportProjectId:this.id,
					pageNum:this.page++,  //当前页数
					pageSize:this.size,  //当前条数
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						this.reportVo=data.vo
						let newArray = data.page.list||[]
						if(newArray.length>0){
							newArray.forEach(item=>{
								item.fileList=item.rectificationAttachment?item.rectificationAttachment.split(','):[]
							})
						}
						
						if (newArray.length == 0 && this.page == 2) {
							this.showEmpty = true
							this.showLoadStatus = false
							this.more = false // 不能再次请求了
							return false;
						} else {
							this.showLoadStatus = true
							this.more = true
							this.showEmpty = false
							this.status = 'loading'
						}
						if (newArray.length < this.size) { // 说明没有更多数据
							this.status = 'noMore'
							this.more = false
							this.showEmpty = false
						}
						this.list = this.list.concat(newArray);
						// console.log(this.list)
					}
				})
			},
			
			isGreater(dateTime){
				// let time='2024-09-02 14:30:00'
				// let specificDateTime = new Date(time)
				let specificDateTime = new Date(dateTime)
				let currentDateTime = new Date()
				return currentDateTime>specificDateTime
			},
			
			// 打开审核弹窗
			openPupup(){
				this.$refs.popup.open()
			},
			
			closePopup(){
				this.$refs.popup.close()
				this.rectificationDesc=''
				this.rectificationAttachment=''
			},
			
			complete(data){
				this.rectificationAttachment=data.fileArr.join(',')

			},
			remove(data){
				this.rectificationAttachment=data.fileArr.join(',')
			},
					
			submit:utils.debounce(function(){
				if(!this.rectificationDesc){
					this.$tools.showToast('请填写整改说明')
					return
				}else if(!this.rectificationAttachment){
					this.$tools.showToast('请上传问题图片或视频')
					return
				}
				
				this.$request.post(this.$api.addPatrolRecord, {
					reportProjectId: this.id,
					rectificationDesc: this.rectificationDesc,
					rectificationAttachment: this.rectificationAttachment
				}, {
					isJava: true
				}).then(res => {
					if(res.code==200){
						let {
							data = {}
						} = res;
						this.$tools.showToast('提交成功')
						this.closePopup()
						this.freshList()
					}
				})
			},1000),
		},
	}
</script>

<style lang="scss" scoped>
	.main-container{
		padding: 28rpx;
	}
	.deadline-box{
		padding-bottom: 20rpx;
		.label{
			color: rgba(255,255,255,0.7);
			font-size: 28rpx;
		}
		.time{
			color: rgba(255,255,255,1);
			font-size: 28rpx;
		}
	}
	.review-box{
		margin-top: 30rpx;
		display: flex;
		justify-content: flex-end;
		.review-btn{
			padding: 0 30rpx;
			height: 50rpx;
			line-height:50rpx;
			border-radius: 8rpx;
			color: #fff;
			font-size: 30rpx;
			background: #26BCFD;
		}
	}
	.rectify-record{
		margin-bottom: 14rpx;
		background: #1D1C5C;
		border-radius: 12rpx;
		padding: 20rpx;
		.record-info{
			display: flex;
			align-items: center;
			color:rgba(255, 255, 255, .5);
			font-size: 28rpx;
			&:not(:first-child){
				margin-top: 10rpx;
			}
			text{
				color:rgba(255, 255, 255, 1);
			}
		}
		
	}
	.imgVideo-box{
		margin-top: 16rpx;
		.label{
			color:rgba(255, 255, 255, .5);
			font-size: 28rpx;
		}
		.upload-box {
			margin-top: 10rpx;
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			gap: 10rpx;
			.file-item {
				width: 156rpx;
				height: 156rpx;
				position: relative;
				.img {
					display: block;
					width: 100%;
					height: 100%;
				}
			}
		}
		.quesheng{
			margin-top: 10rpx;
			color: rgba(255, 255, 255, 1);
			font-size: 26rpx;
		}
	}
	.problem-description{
		background: #1D1C5C;
		border-radius: 12rpx;
		padding: 20rpx;
		.title{
			color: #fff;
			font-size: 28rpx;
		}
		.desc{
			margin-top: 20rpx;
			color: #fff;
			font-size: 28rpx;
		}
		.label{
			color:rgba(255, 255, 255, .6);
			font-size: 28rpx;
		}
		.suggest-box{
			margin-top: 16rpx;
			color: #fff;
			font-size: 28rpx;	
		}
	}
	
	.popup-content{
		background: #1A195F;
		padding: 28rpx 28rpx 10rpx 28rpx;
		border-top-left-radius: 16rpx;
		border-top-right-radius: 16rpx;
		.close-icon{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
		}
		.title{
			font-size: 32rpx;
			font-weight: 500;
			text-align: center;
			letter-spacing: 2rpx;
			color: #fff;
		}
		
		.commit-box{
			margin-top: 20rpx;
			.label{
				color: #fff;
				font-size: 28rpx;
				margin-bottom: 14rpx;
			}
			textarea{
				width: 100%;
				height: 200rpx;
				background: rgba(53,52,132,0.5);
				border-radius: 16rpx;
				padding: 20rpx;
				box-sizing: border-box;
				color: #fff;
				font-size: 28rpx;
			}
			.tips{
				margin-top: 14rpx;
				color: rgba(255,255,255,0.5);
				font-size: 24rpx;
			}
		}
		
		.submit-btn{
			font-size: 32rpx;
			font-weight: 500;
			color: #FFFFFF;
			width: 686rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background: #26BCFD;
			border-radius: 40rpx;
			margin: 50rpx auto;
		}
	}
</style>